<template>
	<view class="fee">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="我的访客" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body" style="background-color: #F2F3F5;">

			<view style="background-color: #FFFFFF;margin-top: 1px;">
				<u-tabs :list="tabs" lineColor="#0B868E" :current="current" @change="changeTabs">
				</u-tabs>
			</view>

			<u-empty :show="showEmpty" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<view class="uni-flex-center" v-for="(item, index) in visitList">

				<view class="main-service uni-cell-90" style="padding-bottom: 10rpx; width: 96%; margin-left: 2%;">
					<view class="user-list">
						<view class="title" style="height:80rpx;line-height: 80rpx;">
							<view style="float: left; clear: both;">
								<text>访客通行</text>
							</view>
							<view style="float: right; margin-right: 20rpx; color: #666666; font-weight: 400;">
								<text>{{item.status_label}}</text>
							</view>

						</view>
						<u-line></u-line>
						<view style="padding-left: 20rpx; padding-right: 20rpx; padding-bottom: 20rpx;">
							<view class="d_view">
								<text class="l_title">来访时间</text>
								<text class="d_content">{{item.time}}</text>
							</view>

							<view class="d_view">
								<text class="l_title">来访姓名</text>
								<text class="d_content">{{item.name}}</text>
							</view>
						</view>
						<u-line></u-line>
						<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;"
							v-if="item.status != 0">
							<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
								@click="toshowModal(item)">删除</u-button>
						</view>
						<view style="width: 20%; margin-right: 20rpx; margin-top: 10rpx;float: right;">
							<u-button size="small" color="#0B868E" type="primary" plain shape="circle"
								@click="intoDetail(item.id)">查看详情
							</u-button>
						</view>


						<view style="color: red; line-height: 60rpx; margin-top: 10rpx;float: left; margin-left: 20rpx;"
							v-if="item.status == -1">
							<text>{{item.memo}}</text>
						</view>
						<view style="clear: both;"></view>
						
					</view>
				</view>
			</view>
			<u-toast ref="uToast"></u-toast>
			<u-modal :show="showDel" title="确定删除此条访客信息吗？" width="500rpx" @confirm="comfirm" @cancel="showDel = false" showCancelButton> </u-modal>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getVisit,delVisit
	} from "@/service/propertyService.js";
	export default {
		data() {
			return {
				current: 0,
				tabs: [{
						name: '全部'
					},
					{
						name: '待处理'
					},
					{
						name: '已处理'
					},
					{
						name: '未放行'
					}
				],
				visitList: [],
				showDel: false,
				item:{},
				showEmpty: false
			}
		},
		onLoad() {
			getVisit().then(this.getVisit);
		},
		methods: {
			getVisit(e) {
				// console.log(e);
				if (e.code == 200) {
					this.showEmpty = false;
					this.visitList = e.result;
				} else {
					this.showEmpty = true;
					this.visitList = [];
				}
			},
			toshowModal(item){
				console.log(item.id);
				this.item=item;
				this.showDel=true
			},
			comfirm(){
				delVisit({
					id:this.item.id
				}).then(res=>{
					if(res.code==200){
						this.showDel=false;
						this.$refs.uToast.show({
						
							type: 'success',
							title: '成功',
							message: res.msg,
							complete() {
								
							}
						})
						this.current=0;
						getVisit().then(this.getVisit);
					}else{
						this.$refs.uToast.show({
						
							type: 'error',
							title: '失败',
							message: res.msg,
							complete() {
								
							}
						})
					}
				})
			},
			changeTabs(e) {
				let par;
				this.current = e.index;
				switch (this.current) {
					case 1:
						par = {
							status: 0
						};
						break;
					case 2:
						par = {
							status: 1
						};
						break;
					case 3:
						par = {
							status: -1
						};
						break;
					default:
						par = {
							status: 99
						};
				}
				getVisit(par).then(this.getVisit);
			},
			intoDetail(id) {
				this.$u.route({
					url: 'pagesMine/visit/detail',
					params: {
						id: id
					}
				})
			}
		}
	}
</script>

<style>
	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}

	.d_content {
		color: #666666;
		font-size: 32rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}
</style>
